<template>
  <div :class="['lyric-container', isLyric ? '' : 'hide']">
    <!-- 关闭按钮 -->
    <div class="close" @click="changeLyricCard">
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="first" v-if="currentRowInfo.al">
      <div class="center">
        <div class="top">
          <div class="left-coverImg">
            <img src="@/assets/lyric.png" alt="" class="bg-coverimg" />
            <img
              :src="currentRowInfo.al.picUrl || ''"
              alt=""
              class="song-img"
            />
            <img src="@/assets/needle.72039ea9.png" alt="" class="needle" />
          </div>
          <div class="right-lyric">
            <div class="title-info">
              <div class="song-name">
                {{ this.currentRowInfo.name }}
              </div>
              <div class="song-album">{{ this.currentRowInfo.al.name }}</div>
              <div class="singer">{{ this.singer }}</div>
            </div>
            <div class="lyric" ref="lyricsRef">
              <div class="placeholder"></div>
              <div
                class="lyricItem"
                v-for="(item, index) in lyric"
                :key="index"
                :class="lyricsIndex == index ? 'currentLyric' : ''"
              >
                {{ item[1] }}
              </div>
              <div class="placeholder"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="comment">
        <!-- 热门评论---当页数为1时有热门评论 -->
        <div class="hotComment" v-if="currentPage === 1">
          <commend :CommentList="hotComments" :showInput="false">
            <div slot="title" class="title-comments">热门评论</div>
          </commend>
        </div>
        <!-- 最新评论 -->
        <div class="newComment">
          <commend :CommentList="comment">
            <div slot="title" class="title-comments">最新评论</div>
          </commend>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        @current-change="currentPageChange"
      >
      </el-pagination>
    </div>
    <div class="second" v-else>暂无播放音乐</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Commend from "@/components/commend/Commend";
export default {
  name: "Lyric",
  components: { Commend },
  data() {
    return {
      isShowLyricCard: false,
      lyric: [[0, "正在加载歌词"]],
      // 当前歌词索引
      lyricsIndex: 0,
      // 热门评论
      hotComments: [],
      // 评论
      comment: [],
      // 当前页数
      currentPage: 1,
      // 总页数
      total: 0,
    };
  },

  mounted() {},
  computed: {
    ...mapState(["isLyric", "currentRowInfo", "musicId"]),
    singer() {
      if (!this.currentRowInfo.al) return "";
      const { ar } = this.currentRowInfo;
      if (ar.length === 1) return ar[0].name;
      let newArr = ar.map((item) => {
        return item.name;
      });
      return newArr.join("/");
    },
  },
  methods: {
    ...mapMutations(["updateIsLyric"]),
    // 点击关闭按钮关闭歌词卡片
    changeLyricCard() {
      this.updateIsLyric();
    },
    // 获取歌词
    async getLyricData() {
      const { data: res } = await this.$http("/lyric", {
        params: { id: this.musicId },
      });
      console.log(res);
      let lyrics = res.lrc.lyric;
      // 对歌词进行处理
      let arr = lyrics.split("\n");
      let time = "";
      let value = "";
      let result = [];
      // 去除空行
      arr.forEach((item) => {
        if (item != "") {
          arr.push(item);
        }
      });
      arr.forEach((item) => {
        time = item.split("]")[0];
        value = item.split("]")[1];
        let t = time.slice(1).split(":");
        result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
        this.lyric = result;
      });
    },
    // 实现歌词滚动
    lyricScroll() {
      // 获取歌词框高度
      console.log(this.$refs.lyricsRef.offsetTop);
    },

    // 获取评论
    async getMusicNewComment() {
      const { data: res } = await this.$http("comment/music", {
        params: {
          id: this.musicId,
          offset: (this.currentPage - 1) * 20,
        },
      });
      this.hotComments = res.hotComments;
      this.comment = res.comments;
      this.total = res.total;
    },
    // 当前页发生变化
    currentPageChange(page) {
      this.currentPage = page;
      this.getMusicNewComment();
    },
  },
  watch: {
    "$store.state.musicId"() {
      this.getLyricData();
      this.getMusicNewComment();
    },
    // 监听currentTime变化
    "$store.state.currentTime"(currentTime, lastTime) {},
  },
};
</script>

<style lang="less" scoped>
.lyric-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 120%;
  height: 91vh;
  z-index: 999;
  margin-bottom: 70px;
  transition: all 1s;
  background: linear-gradient(to bottom, #e2e1e4, #ffffff);
  animation: showLyric 0.5s;
  overflow-y: scroll;
  .first {
    width: 60%;
    margin: 0 auto;
  }
  .close {
    position: absolute;
    top: 20px;
    left: 40px;
    font-size: 30px;
  }
  .close:hover {
    cursor: pointer;
  }
  .second {
    margin: 200px auto;
    text-align: center;
    font-size: 40px;
    color: #919191;
  }
  .center {
    margin: 0 auto;
    transform: translateX(-10%);
    height: inherit;
    position: relative;

    .top {
      height: 500px;
      display: flex;
      justify-content: space-around;
      font-family: "Microsoft YaHei";
      .left-coverImg {
        .bg-coverimg {
          position: absolute;
          top: 125px;
          left: 71px;
          width: 250px;
          height: 250px;
        }
      }
      .needle {
        width: 100px;
        height: 87px;
        position: absolute;
        top: 64px;
        left: 150px;
        transform-origin: top left;
        animation: neddle 1.4s infinite;
        z-index: 99;
      }
      @keyframes neddle {
        0% {
          transform: rotate(0);
        }
        50% {
          transform: rotate(30deg);
        }
        100% {
          transform: rotate(0);
        }
      }
      @keyframes musicImg {
        from {
          transform: rotate(0);
        }
        to {
          transform: rotate(360deg);
        }
      }
      .song-img {
        width: 170px;
        height: 170px;
        position: absolute;
        top: 165px;
        left: 111px;
        border-radius: 50%;
        transform-origin: center;
        animation: musicImg linear 3s infinite;
      }
      .right-lyric {
        width: 40%;
        text-align: center;
        .title-info {
          text-align: center;
          color: #919191;
          font-size: 14px;
          margin: 20px 0;
        }
        .song-name {
          font-size: 30px;
          color: #161616;
          margin-bottom: 5px;
        }
        .song-album {
          margin-bottom: 5px;
        }
        .lyric {
          height: 300px;
          width: 100%;
          font-size: 16px;
          text-align: center;
          overflow-y: scroll;
          .placeholder {
            width: 100%;
            height: 40%;
          }
          .lyricItem {
            margin: 25px 20px;
            transition: all 0.5s;
            line-height: 20px;
            color: #666666;
          }
          .currentLyric {
            font-weight: 600;
            font-size: 20px;
            color: black;
          }
        }
        .lyric::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  .comment {
    transform: translateX(-5%);
  }
  .title-comments {
    font-size: larger;
    font-weight: 600;
  }
}
@keyframes showLyric {
  0% {
    height: 0px;
  }
  100% {
    height: 91vh;
  }
}
@keyframes hiddenLyric {
}
.hide {
  height: 0;
  animation: hiddenLyric 0.5s;
}
</style>